import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };

    // this.fn1 = this.fn1.bind(this);
  }

  // fn1() {
  // 默认情况下this指向undefined
  //   console.log(this.state.count);
  // }

  fn1 = () => {
    // 箭头函数的this指向外层
    console.log(this.state.count);
  };

  render() {
    return (
      <>
        <h3>事件处理</h3>
        {/* bind方法能够改变this指向，它会生成一个新的函数 */}
        {/* 每次产生的新函数指向的内存是不一样的, 太占内存 */}
        {/* <button onClick={this.fn1.bind(this)}>btn1</button> */}

        {/* <button onClick={this.fn1}>btn1</button> */}

        <button onClick={this.fn1}>btn1</button>
      </>
    );
  }
}

export default App;

/*
  1. 改变事件的this指向
    1. 在内联的事件里面直接使用bind去改变this指向
    2. 在constructor构造函数里面使用this.xxx = this.xxx.bind(this);(官网推荐的写法)
    3. 使用箭头函数
*/
